<!-- 个人信息页 -->
<template>
<div class="container">
    <!-- 头像、姓名 -->
    <div class="profile">
        <img :src="profileUrl" alt="头像">
        <div style="padding-top: 1.25rem;" @click="edit">
            <van-icon name="edit" size="20" color="#639339" />
        </div>
    </div>
    <!-- 信息列表 -->
    <div class="infoList">
        <van-cell-group>
            <van-cell title="姓名" :value="userInfo.name" icon="manager-o" />
            <van-cell title="手机号码" :value="userInfo.phone" icon="phone-o" />
            <van-cell title="性别" :value="genderText" icon="friends-o" />
            <van-cell title="出生日期" :value="birthShowText" icon="birthday-cake-o" />
            <van-cell title="身高" :value="userInfo.height + ' cm'" is-link @click="toRecordHeight" icon="aim" />
            <van-cell title="体重" :value="userInfo.weight + ' KG'" is-link @click="toRecordWeight" icon="aim" />
            <van-cell title="BMI" :value="userInfo.bmi" icon="flower-o">
                <template #right-icon>
                    <van-icon name="info" color="#cbe4b4" class="search-icon" @click="showBmiPopup" />
                </template>
            </van-cell>
        </van-cell-group>
    </div>
    <!-- BMI释义 -->
    <van-popup v-model:show="showBmi" round style="width:66%;padding: 1.375rem;">指身体质量指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。<br> 计算公式为：BMI=体重÷(身高*身高)。<br>（体重单位：千克；身高单位：米）</van-popup>
</div>
</template>

<script>
import profileUrl from '../../assets/img/profile_p1.jpeg';
import profileUrlw from '../../assets/img/profile_p2.jpeg';
import profileUrlm from '../../assets/img/profile_p3.jpeg';

export default {
    metaInfo() {
        return {
            title: '个人信息'
        }
    },
    name: 'BaseInfo',
    data() {
        return {
            profileUrl: profileUrl,
            userInfo: {},
            showBmi: false,
            birthShowText: '',
            genderText: '',
        }
    },
    components: {

    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.profileUrl = this.userInfo.gender == '0' ? profileUrlm : this.userInfo.gender == '1' ? profileUrlw : profileUrl;
        this.birthShowText = this.userInfo.birthday.split(' ')[0];
        this.genderText = this.userInfo.gender == '0' ? '男' :
            this.userInfo.gender == '1' ? '女' :
            this.userInfo.gender == '2' ? '保密' : ''
    },
    methods: {
        showBmiPopup() {
            this.showBmi = true;
        },
        edit() {
            sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo))
            this.$router.push('/baseinfoedit');
        },
        toRecordHeight() {
            sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo))
            this.$router.push('/recheight');
        },
        toRecordWeight() {
            sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo))
            this.$router.push('/analyseweight');
        },
    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    background-color: @md-color;

    img {
        width: 100%;
    }

    // 顶部样式
    .profile {
        background-size: 100%;
        text-align: center;
        padding: 1.875rem 0;

        img {
            width: 7.5rem;
            margin: 0 auto;
            border-radius: 50%;
            border: 0.25rem solid #fff;
        }

        .username {
            color: #3f3f3f;
            font-weight: bold;
            font-size: 0.875rem;
            padding: 1.25rem 0;
        }
    }

    .infoList {
        .van-cell__title {
            color: #aaa;
        }

        .van-cell__value {
            color: #333;
        }

        .van-icon-info {
            padding-left: 0.375rem;
            position: relative;
            top: 0.25rem;
        }
    }
}
</style>
